<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="style/css.css" rel="stylesheet" type="text/css">
    <link href="style/register.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<%--導航--%>
<nav id="nav">
    <ul>
        <li><a href="#home" class="main-link">主页</a></li>
        <li><a href="#about" class="main-link">介绍</a></li>
        <li><a href="#service" class="main-link">关于</a></li>
        <li><a href="#portfolio" class="main-link">扩展</a></li>
    </ul>
</nav>
<%--首页--%>
<section id="home">
    <h1>通讯录</h1>
    <div class="container">
        <%--登录模块--%>
        <div class="form row">
            <form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="login_form" action="module/user.jsp"
                  method="post">
                <h3 class="form-title">登录</h3>
                <input type="hidden" name="opt" value="login">
                <div class="col-sm-9 col-md-9">
                    <div class="form-group">
                        <i class="fa fa-userOld fa-lg"></i>
                        <input class="form-control required" type="text" placeholder="账户名" name="id"
                               autofocus="autofocus" maxlength="20"/>
                    </div>
                    <div class="form-group">
                        <i class="fa fa-lock fa-lg"></i>
                        <input class="form-control required" type="password" placeholder="密码" name="password"
                               maxlength="8"/>
                    </div>
                    <div class="form-group">
                        <label class="checkbox">
                            <input type="checkbox" name="remember" value="1"/>记住我
                        </label>
                        <hr/>
                        <a href="#" id="register_btn" class="">没有账户？创建一个</a>
                    </div>
                    <div class="form-group">
                        <input type="submit" class="btn btn-success pull-right" value="登录"/>
                    </div>
                </div>
            </form>
        </div>
        <%--注册模块--%>
        <div class="form row">
            <form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="register_form" method="post"
                  action="module/user.jsp">
                <h3 class="form-title">注册</h3>
                <input type="hidden" name="opt" value="register">
                <div class="col-sm-9 col-md-9">
                    <div class="form-group">
                        <i class="fa fa-userOld fa-lg"></i>
                        <input class="form-control required" type="text"
                               placeholder="账户名" name="id" autofocus="autofocus"/>
                    </div>
                    <div class="form-group">
                        <i class="fa fa-lock fa-lg"></i>
                        <input class="form-control required" type="password" placeholder="密码"
                               id="register_password" name="password"/>
                    </div>
                    <div class="form-group">
                        <i class="fa fa-check fa-lg"></i>
                        <input class="form-control required" type="password" placeholder="确认密码"
                               name="rpassword"/>
                    </div>
                    <div class="form-group">
                        <i class="fa fa-envelope fa-lg"></i>
                        <input class="form-control eamil" type="text" placeholder="邮箱" name="email"/>
                    </div>
                    <div class="form-group">
                        <input type="submit" class="btn btn-success pull-right" value="注册"/>
                        <input type="button" class="btn btn-info pull-left" id="back_btn" value="返回"/>
                    </div>
                </div>
            </form>
        </div>
    </div>

</section>
<%--介绍--%>
<section id="about">
    <p>该通讯录利用互联网实现实现通讯录网络存储和备份的服务，用户注册账号便可以创建自己独立的通讯录本。<br><br></p>
    <p>该通讯录不仅具有基本的在线增删查改的功能，而且能导出通讯信息数据包，提供给用户更加人性化的体验。<br><br></p>
    <p>实现思想：JavaWeb<br><br></p>
    <p>实现技术：JAVA、SQL、JSP、HTML5、CSS3、jQuery、ECMAScript、BootStrap．．．<br><br></p>
</section>
<%--其他--%>
<section id="service">
    <h1>使用说明</h1>
    <p></p>
</section>
<%--未来展望--%>
<section id="portfolio">
    <h1>未来展望</h1>
    <ul>
        <li><a href="#work1" class="portfolio-link">移动端</a></li>
        <li><a href="#work2" class="portfolio-link">微信开发</a></li>
        <li><a href="#work3" class="portfolio-link">代码优化</a></li>
        <li><a href="#work4" class="portfolio-link">数据储存</a></li>
        <li><a href="#work5" class="portfolio-link">文件共享</a></li>
    </ul>
    <article id="work1">
        <img src="images/work1.jpg" alt="...">
        <h2>移动端</h2>
        <p>响应式的移动端开发。一种是一个响应式页面为pc端和手机端同时共享，当工程变大，即要考虑PC端和手机端分开开发和维护提高用户体验。</p>
    </article>
    <article id="work2">
        <img src="images/work2.jpg" alt="...">
        <h2>微信开发</h2>
        <p>结合微信登录可以为用户带来登录便捷。同时，也可尝试微信小程序的开发。</p>
    </article>
    <article id="work3">
        <img src="images/work3.jpg" alt="...">
        <h2>代码优化</h2>
        <p>代码的规范性的增强，分模块方式的优化。</p>
    </article>
    <article id="work4">
        <img src="images/work4.jpg" alt="...">
        <h2>数据存储</h2>
        <p>当数据量增大和访问量增大，应考虑如何提高网站的负荷能力以及服务器被大量访问数据的承受能力。</p>
    </article>
    <article id="work5">
        <img src="images/work5.jpg" alt="...">
        <h2>文件共享</h2>
        <p>分割出云存储块，实现实时共享。</p>
    </article>
    <div id="popup">
        <div id="popup-content">
            <button id="close">Close me</button>
            <div id="popup-holder"></div>
        </div>
        <div id="popup-bg"></div>
    </div>
</section>
<div id="iealert"
     style="width:100%; background:#D35400; text-align:center; line-height:2.5; color:#fff; clear:both; position:fixed; top:0; left:0; z-index:9999; display:none;">
    您的浏览器版本较低，将影响本站点浏览效果，建议您升级浏览器到高级版本。
</div>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/index.js"></script>
<script src="js/register.js"></script>
<script type="text/javascript">
    if (!window.localStorage) {
        document.getElementById("iealert").style.display = "block";
    }
    $(function () {
        $("#register_btn").click(function () {
            $("#register_form").show();
            $("#login_form").hide();
        });
        $("#back_btn").click(function () {
            $("#login_form").show();
            $("#register_form").hide();
        });
    });
</script>
</body>
</html>
